<template>
  <div class="dataset">
    <el-button :autofocus="true" class="add_box_btn" size="mini" @click="addTask">新建任务</el-button>
    <el-table :data="tableData" class="myself-table">
      <el-table-column prop="version" label="版本"/>
      <el-table-column prop="task_name" label="任务类型"/>
      <el-table-column prop="update_time" label="更新时间"/>
      <el-table-column prop="create_user.nick_name" label="更新人"/>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getCocoFile(row)">导出</el-button>
          <el-button type="text" @click="open(row)">打开</el-button>
          <el-button type="text" @click="readOpen(row)">浏览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
      <el-pagination
        background
        class="pagination"
        layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize"
        :current-page.sync="Pagedata.pageNum"
        @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="showDialog" title="标注基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="formData" label-width="120px">
        <el-form-item label="类型" prop="name">
          {{ formData.version }}
        </el-form-item>
        <el-form-item label="类型" prop="name">
          <el-select v-model="formData.ann_type_id" style="width:100%;" :popper-append-to-body="false"
                     popper-class="select-popper" placeholder="请选择">
            <el-option v-for="item in annTypes" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原始版本" prop="alias">
          <el-select v-model="formData.source_id" style="width:100%;" :popper-append-to-body="false"
                     popper-class="select-popper" placeholder="请选择">
            <el-option v-for="item in tableData" :key="item.id" :label="item.version" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commit">确定</el-button>
          <el-button class="none-type" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getAllAnnTypes} from '@/api/annType'
import {addAnnTask, getAnnTasks, syncFile,cocoFile} from '@/api/annTask.js'
import {labelType} from '@/utils/maps'

export default {
  data() {
    return {
      myinfo:{},
      tableData: [],
      formData: {},
      showDialog: false,
      detailDataNow: {},
      annTypes: [],
      submitRules: {
        labelType
      },
      Pagedata: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
        visibility: 0,// 是否为公开项目
        name: "", // 名称搜索
        eqLabels: null, //数据集类型
        order: "create_time", // 排序recommend、createTime、likeCount
      },
      myInfo: {},
    };
  },
  props: ['detailData'],
  watch: {
    detailData(val) {
      this.detailDataNow = val
    }
  },
  async mounted() {
    console.log("detailData", this.detailDataNow)
    this.getAnnTypes()
    this.getData()
    this.myInfo = await this.$myInfo(this)
    console.log("myInfo",this.myInfo)
  },
  methods: {
    // 生成coco文件
    async getCocoFile(row) {
      var formData = new FormData();
      formData.append('annTaskId', row.id);
      let res = await cocoFile(formData)
      console.log(res)
    },
    async getAnnTypes() {
      let res = await getAllAnnTypes()
      this.annTypes = res.data
    },
    async getData() {
      let res = await getAnnTasks({datasetId: this.$route.query.id})
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
      this.formData.version = 'v' + (this.detailData.version_index + 1)
      // this.formData.version ='v5'
      this.tableData.forEach((e) => {
        this.annTypes.forEach((a) => {
          if (e.ann_type_id == a.id) {
            this.$set(e, "task_name", a.name)
          }
        })
      })
      console.log("version", this.detailData.version_index, res)
    },
    async addTask() {


      this.showDialog = true

    },
    async commit() {
      this.formData.dataset_id = this.$route.query.id
      let task = await addAnnTask(this.formData)
      console.log("open", task.data)
      await this.putSysnFile(task.data)
      this.detailData.version_index = this.detailData.version_index + 1
      this.getData()
      this.showDialog = false
    },
    cancel() {
      this.showDialog = false
    },
    async putSysnFile(row) {
      syncFile({
        id: row.id,
        user_id: this.myInfo.id
      })
    },
    open(row) {
      //if (row.type == "0") {
      this.$router.push({
        path: '/dataset/labeleditor',
        query: {
          id: this.$route.query.id,
          ann_task_id: row.id,
          version: row.version,
          ann_type: row.ann_type.name
        }
      })
      //}
      // if (row.type == "1") {
      //   this.$router.push({
      //     path: '/dataset/labeleditor',
      //     query: {
      //       id: this.$route.query.id,
      //       taskid: row.id,
      //       version: row.version
      //     }
      //   })
      // }

      // this.$router.push({
      //   path: '/dataset/imgClassesEditor',
      //   query: {
      //     id: this.$route.query.id,
      //     taskid: row.id,
      //     version: row.version
      //   }
      // })

    },
    readOpen(row) {
      this.$router.push({
        path: '/dataset/readLabeleditor',
        query: {
          id: this.$route.query.id,
          ann_task_id: row.id,
          version: row.version,
          ann_type: row.ann_type.name
        }
      })
    },
    handleCurrentChange(val) {
      this.Pagedata.current = val
      this.Pagedata.page_num = this.Pagedata.current
      this.getData()
    },
  }
}
</script>
<style lang="less" scoped>

</style>
